<template>
<div class="main-contents-box">
  <div class="main-contents-main">
       <div class="firemian">
            <smoke :smoke-list="smokeList"></smoke>
            <div class="firemian-btn">
                <el-button type='primary' @click="edit" size="small" >{{btnname}}</el-button>
            </div>
       </div>
    </div>
  </div>
</template>
<script>
import smoke from "./tem/smoke"
export default {
  components:{
    smoke,
  },
  name: 'fire',
  data () {
    return {
       btnstate:false,//btn状态确定
       btnname:"编辑",//btn名称
       smokeList:[//烟感列表
         /*{
            x:50,
            y:50,
            isActive:false,
            name:"烟感1烟感1",
            deviceid:1111,
            isnull:false,
            brief:""
         },
        {
            x:150,
            y:300,
            isActive:false,
            name:"烟感sfag",
            deviceid:2222,
            isnull:false,
            brief:""
         }*/
       ],
       smoke_arr:[]
      }
    },
    methods:{
      get_pwd(){
        let  pwd; 
        $.ajax({
            url:'../cfg/password.json',
            type:'GET',
            cache:false,
            async: false,
            dataType:'text',
            success:function(result){
                let data = eval("("+result+")");
                pwd = data.password;
            },
            error:function(realdata){
            }
        })
        return pwd;
    },
    check_pwd(){
        let username = window.sessionStorage.getItem('username');
        let password = window.sessionStorage.getItem('password');
        let pwd = this.get_pwd();
        if(username == "admin"){
            if(password != pwd){
                this.$message({
                    message: '密码做了更改,请重新登录!',
                    type: 'info',
                    center:true,
                    showClose: true
                });
                this.loginout();
            }
        }
    },
    loginout(){
        window.sessionStorage.removeItem("username");
        window.sessionStorage.removeItem("password");
        this.set_log("用户退出");
        this.$router.push("/login");
    },
    set_log(str){//用户操作日志
        let  msg= {"cmd":"CGI_LOG_SET_OPT","content":str};
        $.ajax({
            url:"cgi-bin/main.cgi",
            contentType: "application/json;charset=utf-8",
            type:"post",
            data:JSON.stringify(msg),
            success:function(msg){
            }
        })
    },
      get_info(){//获取烟感信息
          let that = this;
          let get_env_msg = {"cmd":"CGI_MONITOR_GET_ENV","sensorlist":[4]};
           if(window.sessionStorage.getItem('username')=="zyl"){
              $.ajax({
                  url:"../static/get_env_fire.json",
                  contentType: "application/json;charset=utf-8",
                  type:"get",
                  dataType:'text',
                  cache:false,
                  async: false,
                  success:function(msg){ 
                  let res = eval("("+msg+")"); 
                  //判断是否存在某类传感器，需要判断数据是不是存在
                    if(res["4"] == undefined){//判断烟感是否存在
                        that.$data.smokeList=[];
                    }else{
                        let smoke_arr = new Array();
                        //that.$data.waters = res["1"];
                        $.each(res['4'],function(n,value){
                             smoke_arr.push(value.deviceid); 
                        }) 

                        //将包含烟感的deviceid数组赋值到什么smoke_arr中，以便实时显示数据使用
                        that.$data.smoke_arr = smoke_arr;
                        let real_msg ={"devicelist":smoke_arr};

                        $.ajax({
                              url:'../static/get_env_smokedata.json',
                              type:'GET',
                              cache:false,
                              async: false,
                              dataType:'text',
                              success:function(result){
                                  let realdata = eval("("+result+")");
                                  $.each(res["4"],function (i,value) {
                                    if(JSON.stringify(realdata[value.deviceid]) == "{}"){
                                          value["isActive"] = false;
                                          value["isnull"] = true;
                                          value["brief"] = "采集超时";   
                                      }else{
                                          if(realdata[value.deviceid]["262145"] == 1){//告警
                                              value["isActive"] = true;
                                          }else{//不告警
                                              value["isActive"] = false;
                                          }
                                          value["isnull"] = false;
                                          value["brief"] = "";
                                      }
                                      res["4"][i] = value; 
                                  })
                                  that.$data.smokeList = res["4"];
                              },
                              error:function(realdata){
                              }
                          })
                    }
                  },
                  error:function(XMLHttpRequest,textStatus,errorThrown){
                  }
              });
        }else{

             $.ajax({
                  url:"cgi-bin/main.cgi",
                  contentType: "application/json;charset=utf-8",
                  type:"post",
                  cache:false,
                  async: false,
                  data:JSON.stringify(get_env_msg),
                  success:function(msg){ 
                  let res = eval("("+msg+")"); 
                  //判断是否存在某类传感器，需要判断数据是不是存在
                    if(res["4"] == undefined){//判断烟感是否存在
                        that.$data.smokeList=[];
                    }else{
                        let smoke_arr = new Array();
                        //that.$data.waters = res["1"];
                        $.each(res['4'],function(n,value){
                            smoke_arr.push(value.deviceid); 
                        }) 

                        //将包含烟感的deviceid数组赋值到什么smoke_arr中，以便实时显示数据使用
                        that.$data.smoke_arr = smoke_arr;
                        let real_msg ={"devicelist":smoke_arr};

                        $.ajax({
                              url:'cgi-bin/JHMonitoring.cgi',
                              type:'post',
                              cache:false,
                              async: false,
                              data:JSON.stringify(real_msg),
                              success:function(result){
                                  let realdata = eval("("+result+")");
                                  $.each(res["4"],function (i,value) {
                                    if(JSON.stringify(realdata[value.deviceid]) == "{}"){
                                          value["isActive"] = false;
                                          value["isnull"] = true;
                                          value["brief"] = "采集超时";   
                                      }else{
                                          if(realdata[value.deviceid]["262145"] == 1){//告警
                                              value["isActive"] = true;
                                          }else{//不告警
                                              value["isActive"] = false;
                                          }
                                          value["isnull"] = false;
                                          value["brief"] = "";
                                      }
                                      res["4"][i] = value; 
                                  })
                                  that.$data.smokeList = res["4"];
                              },
                              error:function(realdata){
                              }
                          })
                    }
                  },
                  error:function(XMLHttpRequest,textStatus,errorThrown){
                  }
              });
        }
      },
      get_smoke_info(){
          let that = this;
          let ii = 0 ;//用于烟感传感器的计数赋值
          let real_msg ={"devicelist":this.$data.smoke_arr};

          if(window.sessionStorage.getItem('username')=="zyl"){
              $.ajax({
                  url:'../static/get_env_real_smokedata.json',
                  type:'GET',
                  cache:false,
                  async: false,
                  dataType:'text',
                  success:function(realdata){
                      let data = eval("("+realdata+")");
                      $.each(data,function (i,value) {
                          if(JSON.stringify(data[i]) == "{}"){
                              that.$data.smokeList[ii]["isActive"] = false;
                              that.$data.smokeList[ii]["isnull"] = true;
                              that.$data.smokeList[ii]["brief"] = "采集超时";
                              ii++;
                          }else{
                              if(data[i]["262145"] == 1){//告警
                                  that.$data.smokeList[ii]["isActive"] = true;
                              }else{//不告警
                                  that.$data.smokeList[ii]["isActive"] = false;
                              }
                              that.$data.smokeList[ii]["isnull"] = false;
                              that.$data.smokeList[ii]["brief"] = "";  
                              ii++;
                          }
                      })  
                  },
                  error:function(realdata){                           
                  }
              })
          }else{
              $.ajax({
                  url:'cgi-bin/JHMonitoring.cgi',
                  type:'post',
                  cache:false,
                  async: false,
                  data:JSON.stringify(real_msg),
                  success:function(realdata){
                      let data = eval("("+realdata+")");
                      $.each(data,function (i,value) {
                          if(JSON.stringify(data[i]) == "{}"){
                              that.$data.smokeList[ii]["isActive"] = false;
                              that.$data.smokeList[ii]["isnull"] = true;
                              that.$data.smokeList[ii]["brief"] = "采集超时";
                              ii++;
                          }else{
                              if(data[i]["262145"] == 1){//告警
                                  that.$data.smokeList[ii]["isActive"] = true;
                              }else{//不告警
                                  that.$data.smokeList[ii]["isActive"] = false;
                              }
                              that.$data.smokeList[ii]["isnull"] = false;
                              that.$data.smokeList[ii]["brief"] = "";  
                              ii++;
                          }
                      })  
                  },
                  error:function(realdata){                           
                  }
              })
          }
      },
      move(){//拖动
          let that=this;
          $(".firemian ul li").draggable({
            containment: "parent",
            stop: function () {
                let lefts,tops,deviceid;
                lefts=parseInt($(this).css("left"));
                tops=parseInt($(this).css("top"));
                deviceid=$(this).find(".isid").text();
                $.each(that.$data.smokeList,function(i,value){
                  if(value.deviceid==deviceid){
                     value.x=lefts;
                     value.y=tops;
                  }
                })
            }
          });
          $(".firemian ul li").draggable("disable");
      },
      edit(){//保存拖动位置
        let that = this;
        this.$data.btnstate=!this.$data.btnstate;
        if(this.$data.btnstate==true){
            this.$data.btnname="保存";
            $(".firemian ul li").draggable( "enable" );
        }else{
            that.$data.btnname="编辑";
            $(".firemian ul li").draggable( "disable" );
            //整合拖动后的位置信息下发
            let position_arr = new Array();
            $.each(that.$data.smokeList,function (i,value) {
                let str = {"deviceid":value.deviceid,"x":value.x,"y":value.y};
                position_arr.push(str); 
            })
            let msg = {"cmd":"CGI_MONITOR_SET_POS","device":position_arr};
            $.ajax({
                url:"cgi-bin/main.cgi",
                contentType: "application/json;charset=utf-8",
                type:"post",
                data:JSON.stringify(msg),
                success:function(msg){
                    let data =eval( "("+msg+")" );
                    if(data.response == true){
                        that.$message({
                          message: '传感器位置设置成功!',
                          type: 'success',
                          center:true,
                          showClose: true
                        });
                    }else{
                      that.$message({
                          message: data.errlog,
                          type: 'error',
                          center:true,
                          showClose: true
                        });
                    } 
                }
            })
        }
      }
    },
    mounted(){
        this.check_pwd(); 
        this.get_info();
        setTimeout(this.move,500)
    },
    beforeCreate(){//用于设置下行设备时清除定时器   
        window.smoke_interval = "";
    },
    created(){
  
    },
    watch:{
      smoke_arr:function(){
          if(this.$data.smoke_arr.length !=0){
                smoke_interval = setInterval(this.get_smoke_info,2000);
                setTimeout(smoke_interval,2000);
            }
      }
    },
    beforeDestroy(){//页面关闭前清掉计时器
        clearInterval(smoke_interval);
    }
}
</script>
<style scoped>
  .firemian{
    width: 800px;
    height: 500px;
    margin: auto;
    margin-top: 5%;
    background: url(../../assets/hw2.png) center no-repeat;
    position: relative;
    min-width: 800px;
  }
  .firemian ul{
    width: 100%;
    height: 100%;
    position: relative;
  }
  .firemian ul li{
    position: absolute;
    left: 0px;
    top: 0px;
    cursor: move;
  }
  .fire{
    position: absolute;
    left: 50px;
    top: 60px;
    z-index: 6;
  }
  .smoke-main{
    height: 37px;
    width: 40px;
    margin-left:28px;
    margin-top: 10px;
    border:5px solid transparent;
    border-radius: 50%;
  }
  .smoke .active{
     border-color: red;
     box-shadow: 0px 0px 30px red;
  }
  .smoke-name{
    width: 100px;
    height: 20px;
    text-align: center;
    letter-spacing: 2px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #0080C0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #0080C0;
    color:#fff;
    border-radius: 4px;
    
    overflow: hidden;/*内容超出后隐藏*/
    text-overflow: ellipsis;/* 超出内容显示为省略号*/
    white-space: nowrap;/*文本不进行换行*/
  }
  .firemian-btn{
    width: 100px;
    height: 40px;
    position: fixed;
    right: 50px;
    top:100px;
    text-align: center;
    line-height: 40px;
  }
  .firemian-btn .el-button{
    width: 80px;
    font-size: 15px;
    letter-spacing: 2px;
    height: 30px;
    line-height: 30px;
    padding:0px;
  }
  .el-badge{
    position: absolute;
    right:-30px;
    top: 30px;
  }
</style>
